<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label-width="100">
        <el-input v-model="queryPaperVo.keyWord" placeholder="关键词" />
      </el-form-item>

      <el-form-item>
        <el-select v-model="queryPaperVo.researchObjId" clearable placeholder="研究对象" @change="linkageMenu">
          <el-option
            v-for="obj in topLevelList"
            :key="obj.id"
            :label="obj.name"
            :value="obj.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryPaperVo.researchObjSonId" clearable placeholder="研究对象子分类">
          <el-option
            v-for="level2 in secondLevelList"
            :key="level2.id"
            :label="level2.name"
            :value="level2.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryPaperVo.researchMethodId" clearable placeholder="研究方法">
          <el-option
            v-for="method in researchMethodList"
            :key="method.id"
            :label="method.name"
            :value="method.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryPaperVo.researchProblemId"
          clearable
          placeholder="研究问题">
          <el-option
            v-for="problem in researchProblemList"
            :key="problem.id"
            :label="problem.name"
            :value="problem.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryPaperVo.focusId" clearable placeholder="关注焦点" size="">
          <el-option
            v-for="obj in focusList"
            :key="obj.id"
            :label="obj.name"
            :value="obj.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="上传时间段">
        <el-date-picker
          v-model="queryPaperVo.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryPaperVo.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-form-item>
        <el-select v-model="queryPaperVo.createPerson" clearable placeholder="上传人">
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.realName"
            :value="user.realName"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getPaperList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>


    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand" label-width="100%">
            <el-form-item
              label="文献标签"
              label-width="100%">

              <span v-if="scope.row.researchObjId !== null">
                <el-tag  size="medium" property="researchObjId" v-text="scope.row.researchObjName"></el-tag>
              </span>
              <span v-if="scope.row.researchObjSonId !== null">
                <el-tag type="success" size="medium" property="researchObjSonId" v-text="scope.row.researchObjSonName"></el-tag>
              </span>
              <span v-if="scope.row.researchMethodId !== null">
                <el-tag type="info" size="medium" property="researchMethodId" v-text="scope.row.researchMethodName"></el-tag>
              </span>
              <span v-if="scope.row.researchProblemId !== null">
                <el-tag type="warning" size="medium" property="researchProblemId" v-text="scope.row.researchProblemName"></el-tag>
              </span>
              <span v-if="scope.row.focusId !== null">
                <el-tag type="danger" size="medium" property="focusId" v-text="scope.row.focusName"></el-tag>
              </span>
            </el-form-item>

            <br/>
            <el-form-item label="文献描述">
              <span>{{ scope.row.paperDescr }}</span>
            </el-form-item>
            <br/>
            <el-form-item label="资料下载（包含pdf,word,ppt等）">
              <el-button @click="downloadFile(scope.row.fileName)" class="el-button-color add-button-box" size="medium" type="primary">
                <i class="el-icon-download el-icon--right"></i>下载文献
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="序号"
        prop="id"
        width="150">
        <!-- 这里的scope可以代表整个表格 -->
        <template slot-scope="scope">
          {{ (page - 1) * size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="文献名称"
        prop="paperName">
      </el-table-column>
      <el-table-column
        label="上传人"
        prop="createPerson"
        width="100">
      </el-table-column>
      <el-table-column
        label="上传日期"
        prop="createDate"
        width="160">
      </el-table-column>
      <el-table-column
        label="更新日期"
        prop="updateDate"
        width="160">
      </el-table-column>


      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit" disabled round>修改</el-button>
          </router-link>
          <!-- scope.row可以获取表格中每一行的数据-->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click.stop="deletePaperInfo(scope.row.createPerson, scope.row.id, scope.row.fileName)" round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 分页条 -->
    <el-pagination
      :current-page="page"
      :page-size="size"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getPaperList"
    />
  </div>
</template>
<script>
  //引入需要调用的teacher.js文件
  import * as paper from '@/api/paper'
  import cookie from 'js-cookie'
  export default {
    data() {
      return {
        list: null,
        //研究方法集合
        researchMethodList: null,
        //用户信息集合
        userList: null,
        //研究对象一级菜单
        topLevelList: [],
        //研究对象二级菜单
        secondLevelList: [],
        //研究问题
        researchProblemList: [],
        //关注焦点
        focusList: [],
        page: 1,//当前页
        size: 10,//每页显示的记录数
        total: 0,//总记录数
        queryPaperVo: {
          researchObjId: '',
          researchObjSonId: ''
        },//条件查询对象
        objName: '',
        //用户信息对象(获取当前登录的用户信息)
        userInfo: {},
        fileName: '',
      }
    },
    created() {
      this.getPaperCategoryInfo()
      this.getPaperList()
      this.initUserInfo()
    },
    methods: {
      //初始化用户信息
      initUserInfo() {
        this.userInfo = JSON.parse(cookie.get("user-info"))
      },

      //下载文件
      downloadFile(paperName) {
        console.log(paperName)
        // paper.downloadFile(paperName)
        // .then(response => {
        //   if(response.code === 30001) {
        //     this.$message({
        //       type: 'error',
        //       message: response.message
        //     });
        //   }else if(response.code === 30000){
        //     this.$message({
        //       type: 'error',
        //       message: response.message
        //     });
        //   }else{
        //     window.location.href = "http://47.106.206.21:9001/paper/download/"+paperName
        //   }
        // })
        // .catch(error => {
        //   console.log(error);
        // })

        window.location.href = "http://47.106.206.21:9001/paper/download/"+paperName
      },

      //清空查询表单
      resetData() {
        this.queryPaperVo = {}
      },

      //删除paper信息（仅限操作本人上传的paper）
      deletePaperInfo(createPerson, paperId, paperName) {
        this.$confirm('是否删除此文献信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//点击确定进入此方法
          //调用后端接口执行删除操作(物理删除)
          console.log(paperName)
          //当前登录对象是文献创建者
          if(createPerson === this.userInfo.realName){
            paper.deletePaperInfo(paperId, paperName)
              .then(response => {
                if(response.data.code === 20000){
                  this.$message({
                    type: 'success',
                    message: "删除成功！"
                  });
                  //调用查询接口
                  this.getPaperList()
                }else{
                  this.$message({
                    type: 'error',
                    message: response.message
                  });
                }
              })
              .catch()
          }else{
            this.$notify({
              title: '错误',
              type: 'error',
              message: "你不是创建者，无权删除此文献信息！",
              offset: 100
            });
          }
        }).catch(() => {//点击取消进入此方法
          this.$message({
              type: 'info',
              message: '已取消删除'
          });
        });
      },

      //获取paper列表数据（默认查询第一页，每页10条记录）
      getPaperList(page = 1) {
        this.page = page
        paper.getPaperPageInfo(this.page, this.size, this.queryPaperVo)
          .then(response => {
            this.$message({
              showClose: true,
              message: '查询成功！',
              type: 'success'
            });
            this.list = response.data.rows;
            this.total = response.data.total;
          })
          .catch(error => {

          })
      },

      //初始化查询表单中的下拉选数据
      getPaperCategoryInfo() {
        paper.getPaperCategoryInfo()
        .then(response => {
          this.researchMethodList = response.data.researchMethodList;
          this.userList = response.data.userList;
          this.topLevelList = response.data.researchObjList;
          this.researchProblemList = response.data.researchProblemList;
          this.focusList = response.data.focusList;
          for(let i=0;i<this.topLevelList.length;i++) {
            if(this.queryPaperVo.researchObjId === this.topLevelList[i].id){
              this.secondLevelList = this.topLevelList[i].secondLevelResearchObjList;
              console.log(this.secondLevelList);
              break;
            }
          }
        })
        .catch()
      },

      //分类联动下拉选
      linkageMenu(value) {
        //每次一级菜单的值发生改变时就清空二级菜单的内容
        this.queryPaperVo.researchObjSonId = ''
        //value为一级菜单选中选项的id
        for(let i=0;i<this.topLevelList.length;i++){
          if(value === this.topLevelList[i].id) this.secondLevelList = this.topLevelList[i].secondLevelResearchObjList
        }
      },
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
